<!doctype html>
<html>
<head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-132775238-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-132775238-1');
  </script>
  <script data-ad-client="ca-pub-3841792756480152" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
  <meta name="description" content="RapiDoc is Web Component for viewing Swagger & OpenAPI Spec. Supports themes, styling and various rendering styles">
  <meta name="keywords" content="RapiDoc, openapi viewer, openapi to html, openapi renderer, ReDoc, Swagger, SwaggerUI, Custom Element, Web Component, OpenAPI, REST, themes, dark mode, markdown, API documentation">

  <link rel="shortcut icon" type="image/png" href="./images/logo.png"/>

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Exo:wght@300;500&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="./index.css">
  <link rel="stylesheet" href="table.css">

  <title>RapiDoc - Web Component based Swagger & OpenAPI Spec Viewer</title>
  <style>
    .m-table {
      width:100%;
    }
    #main-img{
      width:740px;
    }
    .container {
      border:1px solid #aaa;
      border-radius: 4px;
      margin:12px;
      padding:8px;
      width: 200px;
      display:flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
      transition: box-shadow 0.2s, transform 0.2s, color 0.2s;
    }
    .container.solid-light{
      border-width: 0;
      box-shadow: 0 3px 0 0 #b7c3d1, 0 4px 4px -1px rgba(0, 0, 0, 0.6), 0 4px 6px 1px rgba(0, 0, 0, 0.3), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.1) inset;
      background-color: #EFEFEF;
      background-image: linear-gradient(-45deg, #E6EAEF, #e4edf1);
      color: #252730;
    }
    .container.solid-light:hover {
      box-shadow: 0 3px 0 0 #b7c3d1, 0 6px 4px -1px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.14) inset;
    }
    .container.solid-dark {
      border-width: 0;
      box-shadow: 0 3px 0 0 #1e1f26, 0 4px 4px -1px rgba(0, 0, 0, 0.6), 0 4px 6px 1px rgba(0, 0, 0, 0.3), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.1) inset;
      background-color: #3F4351;
      background-image: linear-gradient(-45deg, #3F4351, #384758);
      color: #E6EAEF;
    }
    .container.solid-dark:hover {
      box-shadow: 0 3px 0 0 #1e1f26, 0 6px 4px -1px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 2px 1px rgba(0, 0, 0, 0) inset, 0 18px 32px -2px rgba(255, 255, 255, 0.14) inset;
    }
    .container.solid-dark a {
      font-weight:300;
      color: #ffffffee;
    }
  </style>
</head>

<body>
  <div style="background-color: white; font-family: exo;font-weight: lighter; font-size:large; display:flex; flex-direction: row; align-items: center;justify-content: space-between">
    <div style="padding:15px 20px 15px 20px; ">
      Get a Stripe like API experience for your customers in minutes - documentation, rate-limiting and API-key auth with <a style="font-weight:bold; color:#FF00BD" href="https://zuplo.link/rapidoc-1">zuplo</a>
    </div>
    <div style="padding:2px 20px 2px 20px; ">
      <a class="zuplo-button" href="https://zuplo.link/rapidoc-1">Start free</a>
    </div>
  </div>
  <div  class="banner" style="max-height:400px; overflow:hidden;">
    <div class="topbar">
      <div class="header">
        <a class="menu-item" data-action="url" href="./index.html">
          <img class="logo" src="./images/logo.png" style="width:36px;height:36px;margin-right:10px;" href="./index.html"/>
        </a>
        <div class="product-name">RapiDoc</div>
        <div class="menu" style="flex:1"></div>
        <nav class="menu" onclick="goToSection(event)">
          <a class="menu-item" data-action="url" href="./index.html"> Home </a>
          <a class="menu-item" data-action="url" href="./quickstart.html"> Quick Start </a>
          <a class="menu-item" data-action="url" href="./examples.html"> Examples </a>
          <a class="menu-item" data-action="url" href="./api.html"> API </a>
          <a class="menu-item hide-in-mobile" data-action="url" href="https://github.com/rapi-doc/RapiDoc"> GitHub </a>
        </nav>
      </div>
    </div>

    <!--Waves Container-->
    <div>
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
          <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
          <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
        </g>
      </svg>
    </div>
    <!--Waves end-->
  </div>
  <div style="display:flex; width:100%; flex-wrap:wrap; justify-content:center;">

    <div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./quickstart.html';">
      <h2 style="font-weight:700"> How To Use </h2>
      <div class="row">
        <img style="width:32px" src="./images/html5-logo.png"/>
        <img style="width:32px" src="./images/react-logo.png"/>
        <img style="width:32px" src="./images/vue-logo.png"/>
      </div>
    </div>

    <div class = "container" style="cursor: pointer;" onclick="window.location='./examples/api-demo.html';">
      <a href="./examples/api-demo.html"> RapiDoc API Demo </a>
      <img style="width:32px" src="./images/settings.png"/>
      <div class = "c-description" >
        Demo of various UI customization attributes and events
      </div>
      <a href="./api.html"> Full API Details </a>
    </div>

    <div class = "container" >
      Petstore
      <img style="width:32px" src="./images/dog.png"/>
      <a href="./examples/example1.html"> Basic Petstore </a>
      <a href="./examples/petstore-extended.html"> Extended Petstore </a>
    </div>

    <div class = "container" >
      <div style="padding: 0 0 10px 0">Render Style (light theme)</div>
      <div class="row">
        <div class="col">
          <img style="width:32px" src="./images/mode-view.png"/>
          <a href="./examples/example1.html"> View </a>
        </div>
        <div class="col">
          <img style="width:32px" src="./images/mode-read.png"/>
          <a href="./examples/read-mode.html"> Read </a>
        </div>
        <div class="col">
          <img style="width:32px" src="./images/mode-focused.png"/>
          <a href="./examples/focused-mode.html"> Focused </a>
        </div>

      </div>
    </div>

    <div class = "container" >
      <div style="padding: 0 0 10px 0">Dark Theme</div>
      <div class="row">
        <div class="col">
          <img style="width:32px;filter:brightness(0.6)" src="./images/mode-view.png"/>
          <a href="./examples/example2.html"> Dark View </a>
        </div>
        <div class="col">
          <img style="width:32px;filter:brightness(0.6)" src="./images/mode-read.png"/>
          <a href="./examples/read-mode-dark.html"> Dark Read </a>
        </div>
      </div>
    </div>

    <div class = "container">
      <div>Font Styles</div>
      <img style="width:32px" src="./images/font.png"/>
      <div class = "c-description col">
        <a href="./examples/font.html"> Font Type</a>
        <a href="./examples/font-size.html"> Font Size </a>
      </div>
    </div>

    <div class = "container">
      <a href="./examples/logo.html"> Change Logo  </a>
      <div class = "c-description" >
        <img style="width:32px" src="./images/logo-outline.png"/>
      </div>
    </div>

    <div class = "container" >
      <a href="./examples/themes.html"> Theme </a>
      <img style="width:32px" src="./images/paint.png"/>
      <div class = "c-description" >
        Play with various color schemes
      </div>
    </div>

    <div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./css-parts.html';">
      <h2 style="font-weight:700"> Advanced Styling </h2>
    </div>

    <div class = "container" >
      <div style="padding: 0 0 10px 0">Schema Style</div>
      <div class="row">
        <div class="col">
          <img style="width:32px" src="./images/schema-tree.png"/>
        </div>
        <div class="col">
          <img style="width:32px" src="./images/schema-table.png"/>
        </div>
      </div>
      <a href="./examples/schema-table.html"> Tree / Table </a>
    </div>

    <div class = "container">
      <a href="./examples/schema-expand-level.html"> Schema Expand Level </a>
      <img style="width:48px" src="./images/schema-expand.png"/>
      <div class = "c-description" >
      </div>
    </div>

    <div class = "container">
      <a href="./examples/try.html"> Built in API console </a>
      <img style="width:48px" src="./images/console.svg"/>
      <div class = "c-description" >
      </div>
    </div>

    <div class = "container" >
      <a href="./examples/schema-tab-default.html"> Default Schema View </a>
      <div class = "c-description" >
        Set the default tab in Schema to EXAMPLE instead on MODEL
      </div>
    </div>

    <div class = "container" >
      <a href="./examples/navbar-spacing.html">Navigation Item Spacing</a>
      <div class = "c-description" >
        Compact / Default / Relaxed
      </div>
    </div>

    <div class = "container" >
      <a href="./examples/nav-item-with-method.html">Show color coded API Method in Navigation</a>
      <div class = "c-description" >
      </div>
    </div>

    <div class = "container" >
      <a href="./examples/nav-item-as-path.html">Use API Paths in Navigation</a>
      <div class = "c-description" >
        You can override to display API Paths in Navigation Bar instead of summary
      </div>
    </div>

    <div class = "container">
      <a href="./examples/example3.html"> Change Header Color </a>
      <img style="width:32px" src="./images/header.png"/>
      <div class = "c-description" >
      </div>
    </div>

    <div class = "container" >
      <a href="./examples/slots.html">Slots - HTML Injection</a>
      <div class = "c-description">
        Inject custom HTML content at various locations of your document. 
      </div>
    </div>

    <div class = "container">
      <a href="./examples/markdown.html"> Markdown </a>
      <img style="width:32px" src="./images/markdown.png"/>
      <div class = "c-description" >
        Supports markdown (headings, table, list, code etc)
      </div>
    </div>

    <div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./rapidoc-mini.html';">
      <h2 style="font-weight:700"> RapiDoc Mini </h2>
      <div class = "c-description" style="color:#ccc">
        RapiDoc Mini - Pluck APIs from OpenAPI Spec into your blog
      </div>
    </div>


    <div class = "container" >
      <a href="./examples/links.html">Links</a>
      <div class = "c-description">
        Provide External and Internal links to varius sections of document 
      </div>
    </div>

    <div class = "container" >
      <a href="./examples/markdown-headings.html">Markdown headings in Navigation</a>
      <div class = "c-description">
        Optionally include markdown headings to navigation bar
      </div>
    </div>

    <div class = "container" >
      <a href="./examples/tag-focused-mode.html">Tags in focused mode</a>
      <div class = "c-description">
        Tag clicking on navigation bar
      </div>
    </div>

    <div class = "container">
      <a href="./examples/code-highlight.html"> Syntax Highlighting </a>
      <img style="width:32px" src="./images/syntax-highlight.png"/>
      <div class = "c-description" >
        Supports syntax highlighting in markdown for common languages
      </div>
    </div>

    <div class = "container">
      <a href="./examples/code-samples.html"> Code Samples </a>
      <div class = "c-description" >
        Support for x-code-samples (vendor extension) in endpoint definition
      </div>
    </div>

    <div class = "container">
      <a href="./examples/badges.html"> Endpoint Badges </a>
      <div class = "c-description" >
        Annotate endpoints with short color coded labels using x-badges vendor extension 
      </div>
    </div>

    <div class = "container">
      <a href="./examples/examples-multiple.html"> Examples </a>
      <img style="width:32px" src="./images/file-content.png"/>
      <div class = "c-description" >
        Provide multiple request and response examples for your APIs
      </div>
    </div>

    <div class = "container">
      <a href="./examples/file-upload.html"> File Upload  </a>
      <img style="width:32px" src="./images/upload.png"/>
      <div class = "c-description" >
      </div>
    </div>

    <div class = "container">
      <a href="./examples/binary-response.html"> Binary Response  </a>
      <div class = "c-description" >
        Download or view binary response
      </div>
    </div>

    <div class = "container">
      <a href="./examples/multipart-formdata.html"> Multipart Formdata  </a>
      <div class = "c-description" >
        Submit mixed content such as file(binary) and plain-text using multipart-formdata
      </div>
    </div>

    <div class = "container">
      <a href="./examples/request-body-multiple.html"> Multiple Request Body  </a>
      <img style="width:32px" src="./images/multiple.png"/>
      <div class = "c-description" >
      </div>
    </div>

    <div class = "container">
      <a href="./examples/arrange-by-tags.html"> Arranging Tags  </a>
      <img style="width:32px" src="./images/sort.png"/>
      <div class = "c-description" >
      </div>
    </div>

    <div class = "container">
      <div>Dynamic Parameters</div>
      <a href="./examples/dynamic-query-params.html"> Query Parameters - Dynamic </a>
      <a href="./examples/dynamic-form-params.html"> Form Parameters - Dynamic </a>
    </div>

    <div class = "container" >
      <a href="./examples/search-by-params.html">Advanced Search</a>
      <div class = "c-description" >
        Enable/Disable Advanced search
      </div>
    </div>

    <div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./oauth_instructions.html';">
      <h2 style="font-weight:700"> OAuth Setup </h2>
    </div>

    <div class = "container">
      <div> OAUTH</div>
      <img style="width:32px" src="./images/oauth.png"/>
      <a href="./examples/oauth-demo.html"> OAuth Demo </a>
    </div>

    <div class = "container">
      <a href="./examples/oauth-vendor-extension.html"> OAuth Extensions</a>
      <div class = "c-description" >
        Pre fill client-id and client-secret with vendor extension 'x-client-id' and 'x-client-secret', and pre select
        desired scopes with vendor extension 'x-default-scopes'
      </div>
    </div>
    <div class = "container">
      <a href="./examples/auth.html"> Authentication (Multiple)</a>
      <div class = "c-description" >
        Demonstrate various and complex authentication setup for APIs
      </div>
    </div>

    <div class = "container">
      <a href="./examples/api-key.html">API Key in RapiDoc Element </a>
      <div class = "c-description" >
        Declaratively provide your own API Key by using, and can programatically alter it using JS
      </div>
    </div>

    <div class = "container">
      <a href="./examples/additional-props.html"> Additional Properties </a>
      <div class = "c-description" >
        Apart from fixed predefined properties, schema can contain additional properties
      </div>
    </div>

    <div class = "container">
      <a href="./examples/example4.html"> Embed RapiDoc In HTML  </a>
      <div class = "c-description" >
        rapi-doc element can exist with other HTML content
      </div>
    </div>

    <div class = "container">
      <a href="./examples/mix-html.html"> Embed HTML In RapiDoc  </a>
      <div class = "c-description" >
        Custom HTML content can be inserted in various sections of RapiDoc
      </div>
    </div>

    <div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./list-performance.html';">
      <h2 style="font-weight:700"> Performance Tips </h2>
    </div>

    <div class = "container" >
      <a href="./examples/example9.html"> JSON Object as OpenAPI Spec </a>
      <div class = "c-description" >
        Programmatically load a JSON object (should not contain external JSON refs)
      </div>
    </div>

    <div class = "container" >
      <a href="./examples/server-vars.html"> API Server using variables </a>
      <div class = "c-description" >
        Define API server using variables, to dynamically connect to different servers
      </div>
    </div>

    <div class = "container solid-dark" style="cursor: pointer;" onclick="window.location='./list-html-content.html';">
      <h2 style="font-weight:700"> Mix HTML content </h2>
    </div>

    <div class = "container" >
      <a href="./examples/callback.html"> Callbacks </a>
      <img style="width:32px" src="./images/callback.png"/>
      <div class = "c-description" >
        Specs with Callback (webhooks) Info
      </div>
    </div>

    <div class = "container" >
      <a href="./examples/open-api-3-1.html"> WebHooks </a>
      <img style="width:32px" src="./images/webhook.png"/>
      <div class = "c-description" >
        OpenAPI 3.1.0 Spec with WebHooks
      </div>
    </div>

    <div class = "container" >
      <a href="./examples/multi-datatypes.html"> Multiple DataTypes </a>
      <div class = "c-description" >
        OpenAPI 3.1.0 allows each field to have multiple data-types in accordance to JSON schema standard
      </div>
    </div>

    <div class = "container" >
      <a href="./examples/external-refs.html"> Spec split into multiple files </a>
      <img style="width:32px" src="./images/refs.png"/>
      <div class = "c-description" >
        Large specs split into multiple files referring each other with JSON refs
      </div>
    </div>

    <div class = "container" >
      <div>Schema Composition</div>
      <img style="width:32px" src="./images/org.png"/>
      <a href="./examples/oneof.html"> ONE OF </a>
      <a href="./examples/anyof.html"> ANY OF </a>
      <a href="./examples/allof.html"> ALL OF </a>
    </div>

    <div class = "container" >
      <div>Collapsable tags</div>
      <div class = "c-description" >
        In view & focused mode tags can be expanded and collapsed. You may also set each tags initial state <br/>
        <a href="./examples/collapsable.html"> View Mode </a> &nbsp;&nbsp; | &nbsp;&nbsp; 
        <a href="./examples/collapsable-focused.html"> Focused Mode </a>
      </div>
    </div>
    <div class = "container" >
      <a href="./examples/mock.html"> Mock API </a>
      <div class = "c-description" >
        Using a Mocking API service performing realtime request and response
      </div>
    </div>

    <div class = "container" >
      <a href="./examples/example100.html"> Play Ground </a>
      <img style="width:32px" src="./images/playground.png"/>
      <div class = "c-description" >
        Shows various things that can be controlled using script
      </div>
    </div>
  </div>

  <div style="display:flex; flex-direction: column; margin:20px 32px">
    <table class="m-table">
      <tr> <th style="text-align:left">List of Test cases</th></tr>

      <tr><td class="mono-bold">
        <a href="./examples/parameters.html"> Request Parameters</a>
      </td></tr>

      <tr><td class="mono-bold">
        <a href="./examples/data-types.html"> Data types </a>
      </td></tr>

      <tr><td class="mono-bold">
        <a href="./examples/fill-example-test.html"> Fill various example data types </a>
      </td></tr>

      <tr><td class="mono-bold">
        <a href="./examples/schema-title-and-descriptions.html"> Schema Title and Descriptions </a>
      </td></tr>

      <tr><td class="mono-bold">
        <a href="./examples/readwrite.html"> Read and Write annotations </a>
      </td></tr>

      <tr><td class="mono-bold">
        <a href="./examples/schema-read-and-write-only.html"> Schema Read & Write Only attributes in Request, Response, callback and Webhooks  </a>
      </td></tr>

      <tr><td class="mono-bold">
        <a href="./examples/example-with-nested-refs.html"> Provide Examples with nested refs </a>
      </td></tr>

      <tr><td class="mono-bold">
        <a href="./examples/array-and-object-nesting.html"> Array and Object nesting </a>
      </td></tr>

      <tr><td class="mono-bold">
        <a href="./examples/circular.html"> Circular references </a>
      </td></tr>

      <tr><td class="mono-bold">
        <a href="./examples/side-nav-hidden.html"> Read Mode without a Navigation Bar </a>
      </td></tr>
      
      <tr><td class="mono-bold">
        <a href="./examples/oneof-combinations.html"> One-of combinations </a>
      </td></tr>
      <tr><td class="mono-bold">
        <a href="./tests/nested-allof-and-oneof.html"> Nested all-of & one-of </a>
      </td></tr>
      <tr><td class="mono-bold">
        <a href="./examples/oneof-with-refs.html"> One-of with Refs </a>
      </td></tr>
      <tr><td class="mono-bold">
        <a href="./examples/xxx-of-nesting-with-expand-level.html"> Nested one-of along with schema expand level restriction </a>
      </td></tr>
      <tr> <td class="mono-bold">
        <a href="./tests/long-paths.html"> Long paths </a>
      </td></tr>
      <tr> <td class="mono-bold">
        <a href="./tests/long-descriptions.html"> Long descriptions </a>
      </td></tr>
      <tr> <td class="mono-bold">
        <a href="./tests/large-models.html"> Large models </a>
      </td></tr>
      <tr> <td class="mono-bold">
        <a href="./tests/toomany-example-generation.html"> Too many example generation</a>
        <span class="gray descr"> Multiple combination of any-of and one-of can generate many examples and lead to browser-crash, this test case ensures that max 10 examples are generated  </span>
      </td></tr>
      <tr><td class="mono-bold">
        <a href="./examples/multi-datatypes-test.html"> Multiple DataTypes per field </a>
        <span class="gray descr"> Open API 3.1 allows schema field type to contain multiple types. This test case takes care of various cmbinations and nesting of per field multiple data types </span>
      </td></tr>
      <tr><td class="mono-bold">
        <a href="./tests/open-api-3-1.html"> Webhook  </a>
        <span class="gray descr"> Spec containing WebHooks  </span>
      </td></tr>
      <tr><td class="mono-bold">
        <a href="./tests/xxx-of-recursive.html"> Various cases </a>
        <span class="gray descr"> Spec containing one-of, all-of with primitive types, recursive models and readonly-attributes  </span>
      </td></tr>


    </table>
  </div>
</body>

</html>
